<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- <index /> -->
    
    <!-- <div class="container">
      <div class="HBody">
          <div class="all" @click="change(1)">趣味小课</div>
          <div class="all" @click="change(2)">预备课程</div>
          <div class="all" @click="change(3)">编程入门</div>
      </div> 
      <div class="right">
          <div class="row"  v-for="item in list" :key="item.id">
              <img :src="item.url">
              <p>{{item.content}}</p>
          </div>
      </div>
    </div> -->
    <Body></Body>
        <div  v-if="show == 1">
            <div class="showTitle"></div>
            <h2>消息</h2>
        </div>
        
    <div class="mev">
      <div class="" @click="fun(1)">
        <img src="./assets/msg.png" />
        <p>消息</p>
      </div>
      <div class="" @click="fun(2)">
        <img src="./assets/peopel.png" />
         <p>联系人</p>
      </div>
      <div class=""  @click="fun(3)">
        <img src="./assets/watch.png" />
        <p>看点</p>
      </div>
      <div class="" @click="fun(4)">
        <img src="./assets/dynamic.png" />
        <p>动态</p>
      </div>
    </div>
  </div>
</template>

<script>
// import index from './components/index.vue'
import Body from './components/Body.vue'

export default {
  name: 'App',
  components: {
    Body
  },
data(){
  return{
    show:1,
    list:[],
    list1:[
        {
            content:'通过动态简历的方式，介绍如何通过代码转化成浏览器上的页面。',
            url:'http://by-image.oss-cn-shanghai.aliyuncs.com/Pre/resume/cover.gif',
            id:0
        },
        {
            content:'简单的打击鼓页面，希望你可以谱写出华丽的乐章。',
            url:'http://by-image.oss-cn-shanghai.aliyuncs.com/Pre/drumkit/demo-2.gif',
            id:1
        }],
        list2:[{
            content:'学习编程过程中，我们将花费大量时间使用计算机，使用其中的工具完成我们的工作。这些工具的运行都是依靠操作系统，这里我们来介绍一下如何高效的使用操作系统以及工具。',
            url:'http://by-camp.oss-cn-shanghai.aliyuncs.com/wiki/Javase-online/images/PRE_MACBOOK.png',
            id:2
        },
        {
            content:'使用Markdown书写笔记文档，很多编程语言都实现了跨平台，markdown作为一种自带格式的文本，也可以很方便的在任意支持这种格式的平台或软件中打开，供自己或分享给他人阅读。',
            url:'http://by-camp.oss-cn-shanghai.aliyuncs.com/wiki/Javase-online/images/PRE_markdown.png',
            id:3
        },],
        list3:[{
            content:'我们将以一系列任务的方式带你完成一系列web功能的开发，最终你将学会如何在自己的服务器上部署web应用。这里使用一个简单的任务引导我们如何开始',
            url:'http://by-courses.oss-cn-hangzhou.aliyuncs.com/%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91%E5%85%A5%E9%97%A8/%E5%B0%81%E9%9D%A2/html.jpg',
            id:4
        },
        {
            content:'通过动态简历的方式，介绍如何通过代码转化成浏览器上的页面。',
            url:'http://by-courses.oss-cn-hangzhou.aliyuncs.com/%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91%E5%85%A5%E9%97%A8/%E5%B0%81%E9%9D%A2/StickyNotes.jpg',
            id:5
        },]
    }
},
  created(){
      this.list = this.list1;
  },
  methods:{
    change(index){
      if(index == 1){
          this.list = this.list1;
      }else if(index ==2 ){
          this.list = this.list2;
      }else{
          this.list = this.list3;
      }
  },
  fun(show){
    if(show == 1 ){
      console.log(111)
    }else if(show==2){
      console.log(222)
    }else if(show == 3){
      console.log(333)
    }else{
      console.log(4444)
    }
  }
  }
}
</script>
<style>
*{
  margin: 0;
  padding: 0;
}
.all{
    height: 60px;
}
.container{
    width: 70%;
    margin: 100px auto;
    display: flex;
}
.HBody{
    width: 20%;
    height: 60%;
    text-align: center;
}
.right{
  margin-left: 20px;
  width: 800px;
}
.row{
  float: left;
  width: 300px;
  margin: 0 40px 40px 40px;
  height: 280px;
}
.row img{
    width: 260px;
    height: 155px;
}
.row p{
    font-size: 14px;
    min-width: 140px;
}
.mev{
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  bottom: 5px;
  text-align: center;
}
.mev > div{
  width: 25%;
  height: 60px;
  background: darksalmon;
}
.mev > p{
  height: 30px;
}
.showTitle > h2{
  text-align: center;
}
</style>
